<template>
    <div class="Mock_Trading">
        <Header></Header>
        <div class="Mock_Trading-pc">
            <div class="pc-top1">
                <div class="pc-top1-left">
                    模拟交易列表
                </div>
                <div class="pc-top1-middle">
                    <button class="btn1">+新建模拟交易</button>
                    <button class="btn2">删除</button>
                </div>
                <div class="pc-top1-right">
                    全自动实盘交易，点击了解
                </div>
            </div>
            <div class="pc-top2">
                <div class="text">
                    全部
                </div>
                <div class="text">
                    进行中
                </div>
                <div class="text">
                    已关闭
                </div>
            </div>
            <div class="table">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    align="center"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                    type="selection"
                    width="30">
                    </el-table-column>
                    <el-table-column
                    label="名称"
                    width="220">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                    </el-table-column>
                    <el-table-column
                    prop="frequency"
                    label="频率"
                    width="50">
                    </el-table-column>
                    <el-table-column
                    prop="state"
                    label="状态"
                    width="50">
                    </el-table-column>
                    <el-table-column
                    prop="share"
                    label="分享"
                    width="50">
                    </el-table-column>
                    <el-table-column
                    prop="start_time"
                    label="开始时间"
                    width="85">
                    </el-table-column>
                    <el-table-column
                    prop="accumulated_income"
                    label="累计收益"
                    width="85">
                    </el-table-column>
                    <el-table-column
                    prop="annualized_returns"
                    label="年化收益"
                    width="85">
                    </el-table-column>
                    <el-table-column
                    prop="today_earnings"
                    label="今日收益"
                    width="85">
                    </el-table-column>
                    <el-table-column
                    prop="max_drawdown"
                    label="最大回撤"
                    width="85">
                    </el-table-column>
                    <el-table-column
                    prop="weChat_notice"
                    label="微信通知"
                    width="85">
                    </el-table-column>
                    <el-table-column
                    prop="time_limit"
                    label="时限"
                    width="65">
                    </el-table-column>
                    <el-table-column
                    prop="Submit_position"
                    label="提交位置"
                    show-overflow-tooltip>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pc-bottom1">
                <div class="bottom1-text">
                    + 获取新的模拟交易位
                </div>
            </div>
            <div class="pc-bottom2">
                <div class="bottom2-text">
                    注：盘中开启微信通知，当日不推送微信信号
                </div>
            </div>
        </div>
        <div class="Mock_Trading-mobile">
            <div class="mobile-top1">
                <div class="mobile-top1-text">
                    全部
                </div>
                <div class="mobile-top1-text">
                    进行中
                </div>
                <div class="mobile-top1-text">
                    已关闭
                </div>
            </div>
            <div class="box">
                <div class="box-top">
                    您尚未使用的模拟交易
                </div>
                <div class="box-bottom">
                    <div class="b1">
                        每  天
                    </div>
                    <div class="b2">
                        ——
                    </div>
                    <div class="b2">
                        ——
                    </div>
                    <div class="b2">
                        ——
                    </div>
                    <div class="b2">
                        ——
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="box-top">
                    您尚未使用的模拟交易
                </div>
                <div class="box-bottom">
                    <div class="b1">
                        每  天
                    </div>
                    <div class="b2">
                        ——
                    </div>
                    <div class="b2">
                        ——
                    </div>
                    <div class="b2">
                        ——
                    </div>
                    <div class="b2">
                        ——
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="box-top">
                    您尚未使用的模拟交易
                </div>
                <div class="box-bottom">
                    <div class="b1">
                        每  天
                    </div>
                    <div class="b2">
                        ——
                    </div>
                    <div class="b2">
                        ——
                    </div>
                    <div class="b2">
                        ——
                    </div>
                    <div class="b2">
                        ——
                    </div>
                </div>
            </div>
        </div>
    </div>  
</template>
<script>
import Header from '@/components/Header.vue'
export default {
    name: 'Mock_Trading',
    components:{
        Header,
    },

    data() {
      return {
        tableData: [{
          name: '您尚未使用的模拟交易',
          frequency: '每天',
          state:'----',
          share:'----',
          start_time:'----',
          accumulated_income:'--------',
          annualized_returns:'--------',
          today_earnings:'--------',
          max_drawdown:'--------',
          weChat_notice:'--------',
          time_limit: '永久',
          Submit_position:'--------'

        }, {
         name: '您尚未使用的模拟交易',
          frequency: '每天',
          state:'----',
          share:'----',
          start_time:'----',
          accumulated_income:'--------',
          annualized_returns:'--------',
          today_earnings:'--------',
          max_drawdown:'--------',
          weChat_notice:'--------',
          time_limit: '永久',
          Submit_position:'--------'
        }, {
          name: '您尚未使用的模拟交易',
          frequency: '每天',
          state:'----',
          share:'----',
          start_time:'----',
          accumulated_income:'--------',
          annualized_returns:'--------',
          today_earnings:'--------',
          max_drawdown:'--------',
          weChat_notice:'--------',
          time_limit: '永久',
          Submit_position:'--------'
        }],
        multipleSelection: []
      }
    },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
}
</script>
<style scoped>
@media screen and (min-width:981px){
    .Mock_Trading-mobile{
        display: none;
    }
    .Mock_Trading-pc{
        display: block;
        width:100%;
        height: 100vh;
        box-sizing:border-box;
        padding:120px 8% 0 8%;
        background: white; 
        overflow: hidden;
    }
    .pc-top1{
        width:100%;
        height: 50px;
        float: left; 
        border-bottom: 1px solid  #e6e6e6;
    }
    .pc-top1 .pc-top1-left{
        float: left;
        font-size: 20px;
        line-height: 50px;
        margin-right:15px; 
    }
    .pc-top1 .pc-top1-middle{
        float: left;
    }
    .pc-top1 .pc-top1-middle .btn1{
        float: left;
        width:114px;
        height: 30px;
        margin-top:11px;
        margin-right: 6px;
        background: rgb(90, 90, 199);
        color: white;
    }
    .pc-top1 .pc-top1-middle .btn2{
        float: left;
        width:60px;
        height: 30px;
        margin-top:11px;
        background: rgb(202, 112, 127);
        color: rgb(224, 215, 215);
    }
    .pc-top1 .pc-top1-right{
        float: right;
        font-size: 15px;
        line-height: 50px;
        color: rgb(236, 83, 28);
    }
    .pc-top2{
        float: left;
        width:100%;
        height: 40px;
        border-bottom: 1px solid  #e6e6e6;
    }
    .pc-top2 .text{
        float: left;
        margin-left:13px;
        font-size: 15px;
        margin-top:15px;  
        color: #8b8888;
    }
    .table{
        width:100%;
        margin-bottom:30px; 
    }
    .pc-bottom1{
        width:100%;
        height: 45px;
        border: 1px dashed  rgb(90, 90, 199);
    }
    .pc-bottom1 .bottom1-text{
        font-size: 15px;
        line-height: 43px;
        text-align: center;
        color: rgb(90, 90, 199);
    }
    .pc-bottom2{
        width:100%;
        margin-top:30px;
    }
    .pc-bottom2 .bottom2-text{
        float: right;
        font-size: 13px;
        line-height: 15px;
        color: rgb(253, 23, 23);
    }
}
@media screen and (max-width:980px){
    .Mock_Trading-mobile{ 
        display: block;
        width:100%;
        height: auto;
        box-sizing:border-box;
        padding:57px 1% 0 1%;
    }
    .Mock_Trading-pc{
       display: none;
    }
    .mobile-top1{
        width:100%;
        height: 45px;
        border-bottom: 5px solid  #e6e6e6;
    }
    .mobile-top1 .mobile-top1-text{
        float: left;
        width:33.3%;
        font-size: 15px;
        line-height: 40px;
        text-align: center;
    }
    .box{
        width:100%;
        height: 120px;
        border-bottom: 5px solid  #e6e6e6;
    }
    .box .box-top{
        width:100%;
        height: 50px;
        font-size: 15px;
        line-height: 50px;
        color: rgb(90, 90, 199);
        border-bottom: 2px solid  #e6e6e6;
    }
    .box .box-bottom{
        width:100%;
        height: 60px;
    }
    .box .box-bottom .b1{
        float: left;
        text-align: center;
        width:20%;
        font-size: 15px;
        line-height: 60px;
    }
    .box .box-bottom .b2{
        float: left;
        width:20%;
        border-left:2px solid  #e6e6e6;
        line-height: 60px;
    }
}
</style>